<template>
  <div class="testingBox">
    <template v-for="(item, index) in titleList">
      <div :key="index" :class="!item.status ? 'active':''" class="listBox">
        <div class="list-top">
          <img :src="item.img" />
        </div>
        <div class="list-middle">
          <div class="list-title">
            <div class="list-title-left">{{ item.title }}</div>
            <div class="list-title-right">
              <el-button
                :disabled="!item.status"
                type="primary"
                size="small"
                icon="el-icon-edit"
                circle
                @click="showDialog"
              />
              <el-button
                :disabled="!item.status"
                type="danger"
                size="small  "
                icon="el-icon-delete"
                circle
                @click="deleteList(index)"
              />
            </div>
          </div>
        </div>
        <div class="list-content">{{ item.content }}</div>
        <div class="list-bottom">
          <div class="list-bottom-left">
            <el-button
              v-if="item.status"
              type="primary"
              icon="el-icon-circle-check"
              circle
              @click="item.status = !item.status"
            />
            <el-button
              v-if="!item.status"
              type="danger"
              icon="el-icon-circle-close"
              circle
              @click="item.status = !item.status"
            />
          </div>
          <div class="list-bottom-middle">
            <ul>
              <li>共有{{ item.subjectNum.length }}个科目</li>
              <li>共有{{ item.testPaper }}套试卷</li>
              <li>共有{{ item.testQuestions }}道试题</li>
            </ul>
          </div>
          <div class="list-bottom-right">
            <el-button
              :type="item.status?'primary':'danger'"
              :disabled="!item.status"
              @click="goTestinInfo(item.subjectNum)"
            >管理</el-button>
          </div>
        </div>
      </div>
    </template>
    <div class="listBox addList" @click="showDialog">
      <i class="el-icon-plus" />
    </div>
    <el-dialog :visible.sync="testSetDialog" title="编辑题库" width="30%">
      <el-form
        ref="createTestForm"
        :rules="createTestRules"
        :model="createTestForm"
        label-width="100px"
      >
        <el-form-item label="题库名称" prop="name">
          <el-input v-model="createTestForm.name" maxlength="50" style="width:70%" />
          <span style="color:red">最多输入50字</span>
        </el-form-item>
        <el-form-item label="包含课程" prop="courseList">
          <div>
            <template v-for="(val, num) in createTestForm.courseList">
              <div :key="num">{{ val }}</div>
            </template>
            <div>
              <el-button
                v-if="!showEdit"
                type="primary"
                size="small"
                @click="showEdit = !showEdit"
              >添加科目</el-button>
            </div>
          </div>
          <div v-if="showEdit">
            <el-input v-model="includeCourse" style="width:50%;" />
            <el-button type="primary" size="small" @click="addCourseList">保存</el-button>
            <el-button size="small" @click="showEdit = !showEdit">取消</el-button>
          </div>
        </el-form-item>
        <el-form-item label="绑定科目">
          <div>
            <div class="subject-hint">学科</div>
            <el-select v-model="createTestForm.subject" placeholder="请选择">
              <el-option
                v-for="item in subjectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:10px;">
            <div class="subject-hint">学科小类</div>
            <el-select v-model="createTestForm.classify" placeholder="请选择">
              <el-option
                v-for="item in classifyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="课题描述">
          <el-input
            v-model="createTestForm.textarea"
            :rows="2"
            type="textarea"
            placeholder="请输入内容"
            style="width:80%;"
          />
        </el-form-item>
        <el-form-item label="课题图标">
          <div>
            <template v-for="(val1, num1) in createTestForm.iconList">
              <div
                :key="num1"
                :class="imgIndex==num1?'active':''"
                class="imgList"
                @click="checkImg(num1)"
              >
                <img :src="val1" alt />
                <i class="el-icon-check" />
              </div>
            </template>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="testSetCancel">取 消</el-button>
        <el-button type="primary" @click="testSetConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testSetDialog: false,
      showEdit: false,
      imgIndex: -1,
      includeCourse: '',
      titleList: [
        {
          id: 1,
          status: true,
          img: '/src/assets/testing_images/xueshi-0.png',
          title: '试题',
          content: '课题内容内容内容',
          subjectNum: ['高中语文', '上学期'],
          testPaper: '5',
          testQuestions: '60'
        },
        {
          id: 2,
          status: true,
          img: '/src/assets/testing_images/xiaoxue-0.png',
          title: '作业',
          content: '课题内容内容内容',
          subjectNum: ['高中数学', '下学期'],
          testPaper: '5',
          testQuestions: '60'
        },
        {
          id: 3,
          status: false,
          img: '/src/assets/testing_images/xinlixue-0.png',
          title: '练习',
          content: '课题内容内容内容',
          subjectNum: ['高中英语', '上学期'],
          testPaper: '5',
          testQuestions: '80'
        }
      ],
      createTestForm: {
        name: '',
        textarea: '',
        courseList: [],
        iconList: [
          '/src/assets/testing_images/yinyue-0.png',
          '/src/assets/testing_images/huahua-0.png',
          '/src/assets/testing_images/huaxue-0.png',
          '/src/assets/testing_images/jianzhu-0.png'
        ]

      },
      createTestRules: {
        name: [{ required: true, message: '请输入课题名称', targger: 'blur' }]
      },
      subjectOptions: [
        {
          value: '一年级英语',
          label: '一年级英语'
        },
        {
          value: '二年级英语',
          label: '二年级英语'
        },
        {
          value: '三年级英语',
          label: '三年级英语'
        }
      ],
      classifyOptions: [
        {
          value: '一年级初级',
          label: '一年级初级'
        },
        {
          value: '二年级中级',
          label: '二年级中级'
        },
        {
          value: '三年级高级',
          label: '三年级高级'
        }
      ]
    }
  },
  methods: {
    goTestinInfo(val) {
      this.$router.push({ name: 'Questions', query: { course: val }})
    },
    showDialog() {
      this.testSetDialog = true
    },
    deleteList(index) {
      this.$confirm('确定删除该题库吗', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.titleList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
    },
    addCourseList() {
      this.createTestForm.courseList.push(this.includeCourse)
      this.includeCourse = ''
      this.showEdit = !this.showEdit
    },
    checkImg(index) {
      this.imgIndex = index
    },
    testSetConfirm() {
      this.$refs.createTestForm.validate((valid) => {
        if (valid) {
          this.testSetDialog = false
          this.$refs.createTestForm.resetFields()
        } else {
          return false
        }
      })
    },
    testSetCancel() {
      this.$refs.createTestForm.resetFields()
      this.testSetDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.testingBox {
  padding: 20px;
  .listBox {
    width: 300px;
    height: 300px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 10px;
    border: 1px solid #999;
    display: inline-block;
    margin: 0 20px 20px;
    transition: box-shadow 1s;

    .list-top {
      border-bottom: 1px dashed #898989;
      img {
        width: 60px;
        height: 60px;
      }
    }
    .list-title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      line-height: 36px;
      .list-title-left {
        font-size: 20px;
        font-weight: 600;
      }
      .list-title-right {
        margin-left: auto;
        display: none;
      }
    }
    .list-content {
      height: 32px;
      margin: 10px 0;
      font-size: 12px;
      color: #898989;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .list-bottom {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      margin-top: 50px;
      .list-bottom-left {
        margin-right: auto;
        /deep/.el-button--medium.is-circle {
          padding: 2px;
          i {
            font-size: 20px;
          }
        }
      }
      .list-bottom-middle {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          font-size: 12px;
          color: #333;
          li {
            padding: 5px;
          }
        }
      }
      .list-bottom-right {
        margin-left: auto;
      }
    }
  }
  .listBox:hover {
    box-shadow: 0 0 20px #898989;
    .list-title-right {
      display: block;
    }
  }
  .listBox.active {
    background: rgba($color: #000, $alpha: 0.4);
  }
  .addList {
    position: relative;
    margin-bottom: -12px;
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 80px;
    }
  }
  .subject-hint {
    display: inline-block;
    width: 70px;
    color: #999;
  }
  .imgList {
    position: relative;
    margin-right: 15%;
    display: inline-block;
    img {
      width: 30px;
      height: 30px;
    }
    i {
      display: none;
      color: #32cd32;
      font-size: 20px;
      position: absolute;
      bottom: 5px;
      left: 18px;
    }
  }
  .imgList.active i {
    display: block;
  }
}
</style>
